<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">用户管理</h3>

                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="用户名">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-add">添加</button>
                            <button type="button" class="btn btn-default btn-update">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>部门</th>
                        <th>邮箱</th>
                        <th>手机号</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId"></tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix">
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    //异步加载函数
    $(function () {
        $("#pageId").load("doPageUI", function () {
            //查询数据
            doGetObjects();
        })
        //搜索按钮的绑定事件
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-add,.btn-update,.btn-update-password", doLoadEditUI);

        //绑定禁用或启用按钮点击事件
        $("#tbodyId").on("click", ".btn-valid", doValidById);
    })

    function doLoadEditUI() {
        //1.判断点击的对象
        var title;
        if ($(this).hasClass("btn-add")) {
            title = "添加用户";
        } else if ($(this).hasClass("btn-update")) {
            title = "修改用户";
        } else if ($(this).hasClass("btn-update-password")) {
            title = "修改密码"
            //获取选中的记录的id值
            var id = doGetCheckedId();
            //console.log(id);
            if (!id) {
                alert("请选择一个");
                return;
            }
            //基于用户id查询数据并加载到编辑页面
            doFindObjectById(id);
        }

        function doFindObjectById(id) {
            //1.请求参数
            var params = {"id": id};
            //2.请求url
            var url = "user/doFindObjectById";
            //3.发送异步请求
            $.getJSON(url, params, function (result) {
                if (result.state == 1) {
                    //console.log(result);
                    $("#mainContentId").data("rowData", result.data);
                } else {
                    alert(result.message);
                }
            })

        }

        function doGetCheckedId() {
            return $("tbody input[name='radioId']:checked").val();
        }

        //异步加载页面
        var url = "user/user_edit";
        $("#mainContentId").load(url, function () {
            $(".box-title").html(title);
        });
    }


    function doValidById() {
        //1.获取对象id，validId的值
        //1.2获取的button对象
        var btn = $(this);
        //var user = btn.parents("tr").data("rowData");
        var rowData = btn.parents("tr").data("rowData");
        //console.log(user);
        var id = rowData.id;
        var newValid = rowData.valid;
        //var id=$("<input= [name='radioId']>").val()
        //2.请求url，请求参数
        var url = "user/doValidById";
        var params = {"id": id, "valid": newValid ? 0 : 1};
        //3.发送异步请求，更新数据
        $.post(url, params, function (result) {
            if (result.state == 1) {
                //console.log("result",result.data.valid)
                //alert(result.message);
                doEditRow(btn, newValid ? 0 : 1);
                doGetObjects();
                //局部刷新
            } else {
                alert(result.message);
            }
        })
    }

    function doQueryObjects() {
        //初始化当前页码值
        $("#pageId").data("pageCurrent", 1);
        //异步查询
        doGetObjects();
    }

    function doEditRow(obj, valid) {
        //修改按钮上的内容
        $(obj).html(valid ? "启用" : "禁用");
        //修改tr中第5个td中的内容
        var tr = $(obj).parents("tr");
        tr.find("td:eq(5)").text(valid ? "启用" : "禁用");
        //获取当前行tr对象，然后重新绑定新的值
        var rowData = $("#tbodyId tr").data("rowData");
        rowData.valid = valid ? 0 : 1
        tr.data("rowData", rowData);
    }

    //页面加载完成异步加载当前页数据
    function doGetObjects() {
        //请求的url
        var url = "user/doFindPageObjects";
        var pageCurrent = $("#pageId").data("pageCurrent");
        if (!pageCurrent) pageCurrent = 1;
        //请求参数
        var params = {"pageCurrent": pageCurrent};
        //获取搜索文本框中的值
        params.username = $("#searchNameId").val().trim();
        // var uname=$("searchNameId").val().trim();
        // if(uname)params.username=uname;
        //发送异步请求
        $.getJSON(url, params, function (result) {
            //console.log(result.data.records);
            //处理响应数据
            doHandleResponseResult(result);
        })
    }

    //处理服务端的响应数据
    function doHandleResponseResult(result) {
        if (result.state == 1) {
            //呈现日志记录，将数据呈现在页面上
            doSetTableBodyRows(result.data.records);
            //初始化分页数据
            doSetPagination(result.data);
        } else {
            alert(result.message);
        }
    }

    //将异步响应结果呈现在table的body位置
    function doSetTableBodyRows(records) {
        //获取tbody对象
        var tBody = $("#tbodyId");
        tBody.empty();
        //迭代records记录,并将其内容追加到tbody
        for (var i in records) {
            //构建tr对象
            var tr = $("<tr></tr>");
            tr.data("rowData", records[i]);
            //构建多个td
            var tds = doCreateTds(records[i]);
            //将tds追加到tr中
            tr.append(tds);
            //将tr追加到tbody中
            tBody.append(tr);
        }
    }

    function doCreateTds(row) {
        console.log(row);
        var tds = "<td><input type='radio' name='radioId' value='" + row.id + "' ></td>" +
            "<td>" + row.username + "</td>" +
            "<td>" + (row.sysDept ? row.sysDept.name : '未分配') + "</td>" +
            "<td>" + row.email + "</td>" +
            "<td>" + row.mobile + "</td>" +
            "<td>" + (row.valid ? "启用" : "禁用") + "</td>" +
            "<td>" + new Date(row.createdTime).toLocaleString() + "</td>" +
            "<td>" + new Date(row.modifiedTime).toLocaleString() + "</td>" +
            "<td><button type='button' class='btn btn-default btn-valid'>" + (row.valid ? "禁用" : "启用") + "</button></td>";
        return tds;
    }
</script>




